$(function () {
  renderClassBar();
  renderCampBar();
  renderCompanyBar();
  renderPlatoonBar();
  // renderPersonalPie();
  renderTroops3dPie();
});

/**
 * 渲染班优秀率排行柱状图
 */
function renderClassBar() {
  var myChart = echarts.init(document.getElementById('classChart'));
  var myColor = ['#87e447', '#00e47f', '#00e494',
    '#3ee477', '#95e477', '#a6e477', '#b6db5e', '#d5db5e', '#e5bf61', '#f09365'];
  // 指定图表的配置项和数据
  var option = {
    grid: {
      top: 45,
      left: 50
    },
    tooltip: {
      formatter: (params) => {
        return `<span style="color:${params.color};font-size: 20px">● </span>`
          + params.name + params.seriesName + ' : ' + params.value + '%';
      }
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      data: ["一班", "二班", "三班", "四班", "五班", "六班", "七班", "八班", "九班", "十班"]
    },
    yAxis: {
      name: '优秀率（%）',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        inside: true
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: '优秀率',
        type: 'bar',
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: function (params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num]
            }
          }
        },
        barWidth: 15,
        data: [85, 40, 36, 60, 85, 40, 36, 60, 85, 40]
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

/**
 * 渲染营成绩统计柱状图
 */
function renderCampBar() {
  var myChart = echarts.init(document.getElementById('campChart'));
  var myColor = ['#87e447', '#f4ef90', '#3ee477', '#00dafc'];
  // 指定图表的配置项和数据
  var option = {
    grid: {
      top: 45,
      left: 50
    },
    tooltip: {
      formatter: (params) => {
        return `<span style="color:${params.color};font-size: 20px">● </span>`
          + params.name + params.seriesName + ' : ' + params.value + '%';
      }
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      data: ["一营", "二营", "三营", "四营"]
    },
    yAxis: {
      name: '优秀率（%）',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        inside: true
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: '优秀率',
        type: 'bar',
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: function (params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num]
            }
          }
        },
        barWidth: 25,
        data: [85, 40, 36, 60]
      },
      {
        name: '外框',
        type: 'bar',
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: '#013D79'
          }
        },
        barGap: '-100%',
        z: 0,
        barWidth: 25,
        data: [100, 100, 100, 100]
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

/**
 * 渲染连优秀率排行柱状图
 */
function renderCompanyBar() {
  var myChart = echarts.init(document.getElementById('companyChart'));
  // 指定图表的配置项和数据
  var option = {
    grid: {
      top: 10,
      left: 50,
      right: 90
    },
    tooltip: {
      formatter: (params) => {
        return params.name + params.seriesName + ' : ' + params.value + '%';
      }
    },
    xAxis: [{
      name: '优秀率（%）',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        inside: true
      },
      splitLine: {
        show: false
      },
      type: 'value'
    }],
    yAxis: [{
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      data: ['五连', '四连', '三连', '二连', '一连']
    }],
    series: [{
      name: 'assist',
      type: 'bar',
      stack: '1',
      itemStyle: {
        normal: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)'
        },
        emphasis: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)'
        }
      },
      tooltip: {
        trigger: 'none'
      },
      data: [2, 2, 2, 2, 2]
    }, {
      name: '优秀率',
      type: 'bar',
      stack: '1',
      barWidth: 13,
      label: {
        show: true,
        position: 'right', // 位置
        formatter: (params) => {
          return 'NO.' + params.data.sort
        },
        color: '#fff',
        fontSize: 12,
        distance: 5 // 距离
      },
      itemStyle: {
        barBorderRadius: [20, 20, 20, 20], // 圆角（左上、右上、右下、左下）
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          '#005271', '#36fdd8'
        ].map((color, offset) => ({
          color,
          offset
        }))), // 渐变
      },
      data: [
        {
          value: 65,
          sort: 5
        },
        {
          value: 70,
          sort: 4
        },
        {
          value: 75,
          sort: 3
        },
        {
          value: 80,
          sort: 2
        },
        {
          value: 85,
          sort: 1
        }
      ]
    }]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

/**
 * 渲染排优秀率排行柱状图
 */
function renderPlatoonBar() {
  var myChart = echarts.init(document.getElementById('platoonChart'));
  // 指定图表的配置项和数据
  var option = {
    grid: {
      top: 10,
      left: 50,
      right: 90
    },
    tooltip: {
      formatter: (params) => {
        return params.name + params.seriesName + ' : ' + params.value + '%';
      }
    },
    xAxis: [{
      name: '优秀率（%）',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        inside: true
      },
      splitLine: {
        show: false
      },
      type: 'value'
    }],
    yAxis: [{
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      data: ['五排', '四排', '三排', '二排', '一排']
    }],
    series: [{
      name: 'assist',
      type: 'bar',
      stack: '1',
      itemStyle: {
        normal: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)'
        },
        emphasis: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)'
        }
      },
      tooltip: {
        trigger: 'none'
      },
      data: [2, 2, 2, 2, 2]
    }, {
      name: '优秀率',
      type: 'bar',
      stack: '1',
      barWidth: 13,
      label: {
        show: true,
        position: 'right', // 位置
        formatter: (params) => {
          return 'NO.' + params.data.sort
        },
        color: '#fff',
        fontSize: 12,
        distance: 5 // 距离
      },
      itemStyle: {
        barBorderRadius: [20, 20, 20, 20], // 圆角（左上、右上、右下、左下）
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          '#2b4b5b', '#d5db5e'
        ].map((color, offset) => ({
          color,
          offset
        }))), // 渐变
      },
      data: [
        {
          value: 65,
          sort: 5
        },
        {
          value: 70,
          sort: 4
        },
        {
          value: 75,
          sort: 3
        },
        {
          value: 80,
          sort: 2
        },
        {
          value: 85,
          sort: 1
        }
      ]
    }]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

/**
 * 渲染个人成绩环形图
 * @param container 容器dom
 * @param value 百分比
 */
function renderPersonalPie(container, value) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(container));
  var placeHolderStyle = {
    normal: {
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      color: "rgba(0,0,0,0)",
      borderWidth: 0
    },
    emphasis: {
      color: "rgba(0,0,0,0)",
      borderWidth: 0
    }
  };
  var totalPer = 100;  // 总百分比
  var value = value; // 实际占比
  var outPer = totalPer - value;  // 不在营人数
  // 指定图表的配置项和数据
  var option = {
    series: [
      //下层环形配置
      {
        type: 'pie',
        hoverAnimation: false, //鼠标经过的特效
        radius: ['50%', '80%'],
        startAngle: 180,
        data: [{
          value: totalPer,
          itemStyle: {
            color: '#002E61'
          }
        }],
        label: {
          show: false
        },
        labelLine: {
          show: false,
          length: 0,
          length2: 10
        },
        center: ['40%', '50%'],
        silent: true
      },
      //上层环形配置
      {
        type: 'pie',
        hoverAnimation: false, //鼠标经过的特效
        radius: ['50%', '80%'],
        startAngle: 180,
        itemStyle: {
          color: (params) => {
            if (params.value >= 0 && params.value <= 95) {
              return "#00c3f8"
            } else if (params.value <= 96) {
              return "#f7c851"
            } else {
              return '#e8eb4c'
            }
          }
        },
        data: [{
          value: value
        }, {
          value: outPer,
          itemStyle: placeHolderStyle,
        }],
        label: {
          position: 'outside',
          formatter: (params) => {
            console.log(params)
            return params.value + '%'
          }
        },
        labelLine: {
          show: false,
          length: 0,
          length2: 10
        },
        center: ['40%', '50%'],
        silent: true
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

function renderTroops3dPie() {
  var each = Highcharts.each,
    round = Math.round,
    cos = Math.cos,
    sin = Math.sin,
    deg2rad = Math.deg2rad;
  Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function (proceed) {
    proceed.apply(this, [].slice.call(arguments, 1));
    // Do not do this if the chart is not 3D
    if (!this.chart.is3d()) {
      return;
    }
    var series = this,
      chart = series.chart,
      options = chart.options,
      seriesOptions = series.options,
      depth = seriesOptions.depth || 0,
      options3d = options.chart.options3d,
      alpha = options3d.alpha,
      beta = options3d.beta,
      z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
    z += depth / 2;
    if (seriesOptions.grouping !== false) {
      z = 0;
    }
    each(series.data, function (point) {
      var shapeArgs = point.shapeArgs,
        angle;
      point.shapeType = 'arc3d';
      var ran = point.options.h;
      shapeArgs.z = z;
      shapeArgs.depth = depth * 0.75 + ran;
      shapeArgs.alpha = alpha;
      shapeArgs.beta = beta;
      shapeArgs.center = series.center;
      shapeArgs.ran = ran;
      angle = (shapeArgs.end + shapeArgs.start) / 2;
      point.slicedTranslation = {
        translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
        translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
      };
    });
  });
  (function (H) {
    H.wrap(Highcharts.SVGRenderer.prototype, 'arc3dPath', function (proceed) {
      // Run original proceed method
      var ret = proceed.apply(this, [].slice.call(arguments, 1));
      ret.zTop = (ret.zOut + 0.5) / 100;
      return ret;
    });
  }(Highcharts));
  Highcharts.chart('troopsChart', {
    colors: ['#00b3e4','#ffbf2b', '#ff646b', '#9bce41', ],
    title: {
      text: null
    },
    credits: {
      enabled: false // 禁用版权信息
    },
    chart: {
      type: 'pie',
      animation: false,
      events: {
        load: function () {
          var each = Highcharts.each,
            points = this.series[0].points;
          each(points, function (p, i) {
            p.graphic.attr({
              translateY: -p.shapeArgs.ran
            });
            p.graphic.side1.attr({
              translateY: -p.shapeArgs.ran
            });
            p.graphic.side2.attr({
              translateY: -p.shapeArgs.ran
            });
          });
        }
      },
      options3d: {
        enabled: true,
        alpha: 75,
        beta: 0
      },
      backgroundColor: null
    },
    plotOptions: {
      pie: {
        size: 250,
        allowPointSelect: true,
        cursor: 'pointer',
        depth: 35,
        dataLabels: {
          enabled: true,
          format: '{point.name}<br/><br/>{y}人',
          style: {
            color: '#fff',
            fontSize: '16px'
          }
        },
        startAngle: 270,
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.2lf}%</b><br/>',
          valueSuffix: '%',
        }
      }
    },
    series: [{
      type: 'pie',
      name: '旅优良率',
      data: [
        {
          name: '优秀',
          y: 3500,
          h: 20
        },
        {
          name: '合格',
          y: 1200,
          h: 20
        },
        {
          name: '不合格',
          y: 202,
          h: 20
        },
        {
          name: '良好',
          y: 2600,
          h: 20
        }
      ]
    }]
  });
}